.index-wrapper {

  .index-post-wrapper {
    display: flex;
    align-items: center;
    padding: 1.75rem 0 !important;

    .post-image {
      img {
        width: 100%;
        height: 10rem;
        object-fit: cover;
        border-radius: 5px;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
      }
    }

    .post-intro {
      display: flex;
      flex-direction: column; 
      min-height: 10rem;

      .post-header {
        display: flex;
        
        h1 {
          margin-top: 0;
          margin-bottom: 0.5rem;
        }

        i {
          transform: rotate(45deg) translate(-50%, 25%);
        }
      }

      .description {
        flex-grow: 1; 
        color: $header-text-color;
        font-weight: 500;
        padding: 0.5rem 0;
      }

      .post-footer {
        color: $footer-text-color;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        & > time {
          color: $footer-text-color;
          margin-right: 5px;
          line-height: 100%;
        }

        & time + div {
          line-height: 100%;
        }

        .tag {
          color: $footer-text-color;
          font-weight: 500;
          font-size: 0.85rem;
          margin-right: 2px;
          border-left: 3px solid #0d6efd;
          padding-left: 5px;
          line-height: 100%;
        }
      }
    }
  }
}

@media (max-width: 767px)  {
  .index-post-wrapper {
    padding: 1.25rem 0 !important;  
  }

  .post-image {
    padding-bottom: 1.25rem;
  }

  time {
    margin: 5px 0;
  }
}